<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
	<title>Real_Estate_4_Rent</title>
	<!-- Bootstrap Core CSS -->
   	<link href="<c:url value="/resources/admin/css/bootstrap.min.css"/>" rel="stylesheet"/>
	<!-- bootstrap carousel -->
	<link href="<c:url value="/resources/style/style.css"/>" rel = "stylesheet" type="text/css"></link>
	<link href="<c:url value="/resources/themes/jquery-ui.css"/>" rel="stylesheet"></link>
	<link rel="stylesheet" href="<c:url value="/resources/style/bootstrap-multiselect.css"/>" type="text/css"></link>
	<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<!-- simple search css -->
	<link rel="stylesheet" href="<c:url value="/resources/style/common.css"/>" type="text/css"></link>
	<!-- /simple search css -->
	<!-- /bootstrap carousel -->
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 	<!-- validate email form -->
 	<!-- /validate -->
	<script type="text/javascript">
		$(document).ready(function(){
			// carousel pause
			$('.carousel').carousel({
			  interval: false
			});
			
			var mapAddress = $(".room_map_address").val();
			var a = mapAddress.split(',');
			loadMap(a[0], a[1]);
		});
		
	  function loadMap(a,b) {
	    var myLatlng = new google.maps.LatLng(a, b);
	    var myOptions = {
	      zoom: 15,
	      center: myLatlng,
	      mapTypeId: google.maps.MapTypeId.ROADMAP
	   };
	   var map = new google.maps.Map(document.getElementById("map_container"), myOptions);
	   var infowindow = new google.maps.InfoWindow({
	      content: 'hello world' + '<br/> <b>Mr Phuc: (+84)904 808 199</b>'
	   });
	
	   var image = '/HappyHome/resources/images/images.png';
	   var marker = new google.maps.Marker({
	      position: myLatlng,
	      map: map,
	      icon: image
	   });
	   map.setCenter(marker.getPosition());
	   infowindow.open(map, marker);
	  }
	</script>
	<style>
		.loading-indicator {
		  position: fixed;
		  top: 50%;
		  left: 50%;
		  z-index: 9999;
		}
		
		.information_notify{
			background-color: #5bc0de;
			border: 1px solid #5bc0de;
			border-radius: 4px 4px 4px 4px;
			box-shadow: 0 0 8px #5bc0de;
			color: #fff;
			z-index: 9999;
		}
	</style>
</head>

<body>
		<!-- loading icon -->
		<img src="<c:url value="/resources/images/ajax-loader.gif"/>" class="loading-indicator" id="loading-indicator" style="display:none"/>
		<div class="information_notify loading-indicator" id="information_notify" style="display:none">
		<div style="display: inline-block;"><img src="<c:url value="/resources/images/tick.png"/>"/></div> A message sent to staff, successfully!
		</div>
		<!-- / loading icon -->
		<%@ include file="/WEB-INF/pages/sessionvariable.jsp" %>
		<!-- top navigation -->
		<%@ include file="/WEB-INF/pages/topnavigation.jsp" %>
		<!-- / top navigation -->
		<!-- simple search -->
		<%@ include file="/WEB-INF/pages/simplesearch.jsp" %>
		<!-- /simple search -->
      	<!-- search form -->
      	<%@ include file="/WEB-INF/pages/searchform.jsp" %>
      	<!-- /search form -->
		<!-- information room detail -->
		<input type="hidden" name="isOpen" value="<%= session.getAttribute( "isOpen" ) %>" id="isOpenValue"/>
		<div class="container living_panel_bottom_top">
			<div class="panel panel-default">
			  <div class="panel-body">
			  		<!-- list room of that room -->
			  		<c:forEach var="property" items="${listRooms }" varStatus="counter">
				   		<c:choose>
				    		<c:when test="${counter.count %2 != 0 && counter.count == fn:length(listRooms)}">
			    				<div class="col-md-6 col-sm-6 col-xs-12">
									<div class="panel panel-default living_boder_radius_shadow living_panel_bottom_top">
										<div class="panel-body">
											<div class="col-md-6 living_product_xs_device">
												<a href="productDetail/${property.idRoom }">
												<div class="living_panel_bottom_top">
													<img src="${pageContext.request.contextPath}/${property.url }" class="img-responsive" style="height: 140px;"/>
												</div>
												</a>
											</div>
											<div class="col-md-6 living_product_xs_device living_product_font_size_line_height">
												<div class="row living_margin_left_right">
													<spring:message code="floor" text="Floor" />:
													${property.floor}
												</div>
												<div class="row living_margin_left_right">Sqft: ${property.sqft} m<sup>2</sup></div>
												<div class="row living_margin_left_right">
													<spring:message code="numberPerson" text="NumberPerson" />:
													${property.numberMaxPerson}
												</div>
												<div class="row living_margin_left_right">Price: 
													<div class="special_mark">${property.priceRoomValue}</div>
												</div>
												<div class="row living_margin_left_right happyhome_margin_top">
													<div id="characteristic_favorite">
														<img src="<c:url value="/resources/images/favorite.jpg"/>" style="width:20px; height:20px;"/> &nbsp;Add favorites
													</div>
												</div>
											</div>
											<div class="col-md-12 living_margin_left_right">
												<a href="productDetail/${property.idRoom }">
													<div id="address_detail">${property.homeValue }</div>
												</a>
												<div id="address">Address: ${property.address }</div>
											</div>
										</div>
									</div>
								</div><!-- / col-md-6-->
				    		</c:when>
				    		<c:when test="${counter.count %2 != 0}">
			    				<div class="col-md-6 col-sm-6 col-xs-12">
									<div class="panel panel-default living_boder_radius_shadow living_panel_bottom_top">
										<div class="panel-body">
											<div class="col-md-6 living_product_xs_device">
												<a href="productDetail/${property.idRoom }">
													<div class="living_panel_bottom_top">
														<img src="${pageContext.request.contextPath}/${property.url }" class="img-responsive" style="height: 140px;" />
													</div>
												</a>
											</div>
											<div class="col-md-6 living_product_xs_device living_product_font_size_line_height">
												<div class="row living_margin_left_right">
													<spring:message code="floor" text="Floor" />:
													${property.floor}
												</div>
												<div class="row living_margin_left_right">Sqft: ${property.sqft} m<sup>2</sup></div>
												<div class="row living_margin_left_right">
													<spring:message code="numberPerson" text="NumberPerson" />:
													${property.numberMaxPerson}
												</div>
												<div class="row living_margin_left_right">Price: 
													<div id="special_mark" class="special_mark">${property.priceRoomValue}</div>
												</div>
												<div class="row living_margin_left_right happyhome_margin_top">
													<div id="characteristic_favorite">
														<img src="<c:url value="/resources/images/favorite.jpg"/>" style="width:20px; height:20px;"/> &nbsp;Add favorites
													</div>
												</div>
											</div>
											<div class="col-md-12 living_margin_left_right">
												<a href="productDetail/${property.idRoom }">
													<div id="address_detail">${property.homeValue }</div>
												</a>
												<div id="address">Address: ${property.address }</div>
											</div>
										</div>
									</div>
								</div><!-- /col-md-6 -->
				  	<!-- /row </div> row -->
				    		</c:when>
				    		<c:otherwise>
				    			<!-- <div class="row"> -->
			    				<div class="col-md-6 col-sm-6 col-xs-12">
									<div class="panel panel-default living_boder_radius_shadow living_panel_bottom_top">
										<div class="panel-body">
											<div class="col-md-6 living_product_xs_device">
												<a href="productDetail/${property.idRoom }">
													<div class="living_panel_bottom_top">
														<img src="${pageContext.request.contextPath}/${property.url }" class="img-responsive" style="height: 140px;"/>
													</div>
												</a>
											</div>
											<div class="col-md-6 living_product_xs_device living_product_font_size_line_height">
												<div class="row living_margin_left_right">
													<spring:message code="floor" text="Floor" />:
													${property.floor}
												</div>
												<div class="row living_margin_left_right">Sqft: ${property.sqft} m<sup>2</sup></div>
												<div class="row living_margin_left_right">
													<spring:message code="numberPerson" text="NumberPerson" />:
													${property.numberMaxPerson}
												</div>
												<div class="row living_margin_left_right">Price: 
													<div id="special_mark" class="special_mark">${property.priceRoomValue}</div>
												</div>
												<div class="row living_margin_left_right happyhome_margin_top">
													<div id="characteristic_favorite">
														<img src="<c:url value="/resources/images/favorite.jpg"/>" style="width:20px; height:20px;"/> &nbsp;Add favorites
													</div>
												</div>
											</div>
											<div class="col-md-12 living_margin_left_right">
												<a href="productDetail/${property.idRoom }">
													<div id="address_detail">${property.homeValue }</div>
												</a>
												<div id="address">Address: ${property.address }</div>
											</div>
										</div>
									</div>
								</div><!-- /col-md-6 -->
				    		</c:otherwise>
				    	</c:choose>
				    </c:forEach>
				    <!-- /list room of that room -->
				    <!-- detail room information -->
			    	<c:if test="${not empty room}">
						<!-- row 1: price|sqft|room -->
						<input type="hidden" name="room_map_address" value="${room.googleMap }" class="room_map_address"/>
						<div class="row">
							<div class="col-md-1 col-sm-1 col-xs-1">
								&nbsp;
							</div>
							<div class="col-md-11 col-sm-11 col-xs-11">
								<c:if test="${not empty room.priceRoom }">
									<div class="col-md-4 col-sm-4 col-xs-12">
										Price:
										<div id="special_mark"><c:out value="${room.priceRoom } USD/month"></c:out> </div>
									</div>
								</c:if>
								<c:if test="${empty room.priceRoom }">
									<div class="col-md-4 col-sm-4 col-xs-12">
									</div>
								</c:if>
								<c:if test="${not empty room.sqft }">
									<div class="col-md-4 col-sm-4 col-xs-12">
										Sqft:
										<c:out value="${room.sqft } sqm"></c:out>
									</div>
								</c:if>
								<c:if test="${empty room.sqft }">
									<div class="col-md-4 col-sm-4 col-xs-12">
									</div>
								</c:if>
								<c:if test="${not empty room.priceRoom }">
									<div class="col-md-4 col-sm-4 col-xs-12">
										Room:
										<c:out value="${room.priceRoom }"></c:out>
									</div>
								</c:if>
								<c:if test="${empty room.priceRoom }">
									<div class="col-md-4 col-sm-4 col-xs-12">
									</div>
								</c:if>
							</div>
						</div>
						<!-- row 1: /price|sqft|room -->
						<!-- Description -->
						<label>Description</label><hr />
						<c:if test="${not empty room }">
							${room.description }
						</c:if>
						<!-- / Description -->
				</c:if>
				<!-- /detail room information -->
				<!-- detail house information -->
		    	<c:if test="${not empty house}">
					<!-- row 1: price|sqft|room -->
					<input type="hidden" name="room_map_address" value="${house.googleMap }" class="room_map_address"/>
					<div class="row">
						<div class="col-md-1 col-sm-1 col-xs-1">
							&nbsp;
						</div>
						<div class="col-md-11 col-sm-11 col-xs-11">
							<c:if test="${not empty room.priceRoom }">
								<div class="col-md-4 col-sm-4 col-xs-12">
									Price:
									<div id="special_mark"><c:out value="${room.priceRoom } USD/month"></c:out> </div>
								</div>
							</c:if>
							<c:if test="${empty room.priceRoom }">
								<div class="col-md-4 col-sm-4 col-xs-12">
								</div>
							</c:if>
							<c:if test="${not empty room.sqft }">
								<div class="col-md-4 col-sm-4 col-xs-12">
									Sqft:
									<c:out value="${room.sqft } sqm"></c:out>
								</div>
							</c:if>
							<c:if test="${empty room.sqft }">
								<div class="col-md-4 col-sm-4 col-xs-12">
								</div>
							</c:if>
							<c:if test="${not empty room.priceRoom }">
								<div class="col-md-4 col-sm-4 col-xs-12">
									Room:
									<c:out value="${room.priceRoom }"></c:out>
								</div>
							</c:if>
							<c:if test="${empty room.priceRoom }">
								<div class="col-md-4 col-sm-4 col-xs-12">
								</div>
							</c:if>
						</div>
					</div>
					<!-- row 1: /price|sqft|room -->
					<label>Description</label><hr />
					<c:if test="${not empty house }">
						${house.description }
					</c:if>	
				</c:if>
				<!-- /detail house information -->
				
				<!-- Amenities -->
				<c:if test="${not empty amenities }">
					<label>Amenities</label> <hr />
					<div class="row">
						<div class="col-md-1 col-sm-1 col-xs-1">
							&nbsp;
						</div>
						<div class="col-md-11 col-sm-11 col-xs-11">
							
								<c:forEach var="ameniti" items="${amenities }" varStatus="counter">
									<div class="col-md-4 col-sm-4 col-xs-12">
										<div class="col-md-1 col-sm-1 col-xs-1" id="information_detail_item">&nbsp;
										</div>
										<div class="col-md-10 col-sm-10 col-xs-10">
											${ameniti.nameUtility }
										</div>
									</div>
								</c:forEach>
							
						</div>
					</div><!-- /row -->
				</c:if>
				<!-- /Amenities -->
				<!-- Map -->
				<c:if test="${not empty room || not empty house}">
					<hr />
					<div class="col-md-7 col-sm-7 col-xs-10 living_map_height">
						<div class="panel panel-default">
						  	<div class="panel-heading">Map</div>
						  	<div class="panel-body" id="map_container" style="height:300px;">
						  	</div>
						</div>
					</div>	
					<div class="col-md-5 col-sm-5 col-xs-10 living_map_height">
						<div class="panel panel-default">
						  	<div class="panel-heading">Video</div>
						  	<div class="panel-body" style="height:300px;">
						  		<iframe style="width:100%; height: 100%;" src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
						  	</div>
						</div>
					</div>	
				</c:if>
				<!-- /Map -->
				<c:if test="${not empty news }">
					<h3>${news.titleNews }</h3>
					<hr />
					<p>${news.content }</p>
				</c:if>
				<!-- Send enquiry -->
				<div class="col-md-12 col-sm-12 col-xs-12">
					<label>Send Enquiry</label><hr/>
				</div>
				<div class="col-md-4 col-sm-4 col-xs-12">
				   	<div class="row living-padding-lr">Mr Son</div>
				   	<div class="row living-padding-lr">
				   		<div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2">
			   				<img src="<c:url value=""/>" style="width:100%;"/>
			   			</div>
				   	</div>
				    <div class="row living-padding-lr">Company: Living Home Stay</div>
					<div class="row living-padding-lr">Mobile:(+84) 1643 770 510</div>
				</div><!-- /col-md-4 col-sm-4 col-xs-12 -->
				<div class="col-md-8 col-sm-8 col-xs-12">
					    <form class="form-horizontal" role="form" id="form_enquiry">
						  	<div class="form-group has-feedback" id="form_group_name">
							    <label class="control-label col-md-3 col-sm-3 col-xs-12 living_font_weight">
							    	Name&nbsp;<div id="special_mark">*</div>
							    </label>
							    <div class="col-md-5 col-sm-5 col-xs-12">
							      <input type="text" class="form-control" name="name" id="name_enquiry"></input>
							      <span class="glyphicon glyphicon-ok form-control-feedback" style="display:none;" id="name_glyphicon_ok"></span>
							      <span class="glyphicon glyphicon-remove form-control-feedback" style="display:none;" id="name_glyphicon_remove"></span>
							    </div>
					  		</div>
						  <div class="form-group has-feedback" id="form_group_email">
						    <label class="control-label col-md-3 col-sm-3 col-xs-12 living_font_weight">
						    	Email&nbsp;<div id="special_mark">*</div>
						    </label>
						    <div class="col-md-5 col-sm-5 col-xs-12">
						      <input type="text" class="form-control" name="email" id="email_enquiry"></input>
						       <span class="glyphicon glyphicon-ok form-control-feedback" style="display:none;" id="email_glyphicon_ok"></span>
						       <span class="glyphicon glyphicon-remove form-control-feedback" style="display:none;" id="email_glyphicon_remove"></span>
						    </div>
						    <div class="col-md-5 col-md-offset-3 col-sm-5 col-sm-offset-3 col-xs-12" id="validate_email_error" style="display: none;">
						    	<label class="living_font_weight" style="color:#a94442;">Please enter a valid email address</label>
					    	</div>
						  </div>
						  <div class="form-group has-feedback" id="form_group_number">
						    <label class="control-label col-md-3 col-sm-3 col-xs-12 living_font_weight">
						    	Contact Number&nbsp;<div id="special_mark">*</div>
						    </label>
						    <div class="col-md-5 col-sm-5 col-xs-12">
						      <input type="text" class="form-control" name="contactNumber" id="number_enquiry"
						      	onkeypress='return (event.charCode >= 48 && event.charCode <= 57) || event.charCode == 8 || event.charCode == 46' maxlength="11"></input>
						       <span class="glyphicon glyphicon-ok form-control-feedback" style="display:none;" id="number_glyphicon_ok"></span>
						       <span class="glyphicon glyphicon-remove form-control-feedback" style="display:none;" id="number_glyphicon_remove"></span>
						    </div>
						  </div>
						  <div class="form-group has-feedback" id="form_group_enquiry">
						    <label class="control-label col-md-3 col-sm-3 col-xs-12 living_font_weight">
						    	Enquiry&nbsp;<div id="special_mark">*</div>
						    </label>
						    <div class="col-md-9 col-sm-9 col-xs-12">
						      <textarea class="form-control" id="en_enquiry" name="enquiry"></textarea>
						      <span class="glyphicon glyphicon-ok form-control-feedback" style="display:none;" id="enquiry_glyphicon_ok"></span>
						      <span class="glyphicon glyphicon-remove form-control-feedback" style="display:none;" id="enquiry_glyphicon_remove"></span>
						    </div>
						  </div>
						  <div class="form-group">
						    <label class="col-md-3 col-sm-3 col-xs-12">
						    	&nbsp;
						    </label>
						    <div class="col-md-9 col-sm-9 col-xs-12">
						      <input type="submit" value="Submit" class="btn btn-info"></input>
						    </div>
						  </div>
					</form>
				</div>
				<!-- /Send enquiry -->
			  </div><!-- / panel body -->
			</div>
		</div>	<!-- /container -->
		<!-- /information room detail-->
  	<!-- like facebook component -->
	<div class="container">
      <div id="likeFaceBookComponent">
      </div>
    </div>
    <!-- /like facebook component -->
	
	<!-- footer navigation -->
	<a href="#" id="backToTop" class="backToTop">
		<img src="<c:url value="/resources/images/top.png"/>"/> 
	</a>
	<!-- / footer navigation -->
	<!-- jQuery Version 1.11.0 -->
   	<script src="<c:url value="/resources/admin/js/jquery-1.11.0.js"/>"></script>
	<!-- Bootstrap Core JavaScript -->
   	<script src="<c:url value="/resources/admin/js/bootstrap.min.js"/>"></script>
   
   	<!-- multiple select -->
    <script type="text/javascript" src="<c:url value="/resources/admin/js/bootstrap-multiselect.js"/>"></script>
	<!-- /multiple select -->
	<!-- range slider -->
  	<script src="<c:url value="/resources/themes/jquery-ui/jquery-ui.js"/>"></script>
  	<!-- /range slider -->
  	<!-- common javascript -->
  	<script src="<c:url value="/resources/js/common.js"/>"></script>
  	<!-- / common javascript -->
  	<!-- enquiryform javascript -->
  	<script src="<c:url value="/resources/js/enquiryform.js"/>"></script>
  	<!-- / enquiryform javascript -->
</body>
</html>
